<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        main{
            width: 100%;
            height: calc(100vh - 130px);
        }
        p{
            word-wrap: break-word;
            word-break: break-all;
        }
        main ._step{
            height: 50%;
            padding-top: 1rem;
            padding-left: 2rem;
            padding-right: 2rem;
        }
        ._step .content{
            width:100%;
            height: 100%;
        }
        /*.shape{
            display: block !important;
            width: 50px;
            height: 50vh;
        }
        .shape1{
            float: right;
            shape-outside: polygon(65% 0px,10% 100%,100% 100%);
        }
        .shape2{
            margin-left: 15px;
            float: left;
            shape-outside: polygon(56% 0px,0% 100%,100% 100%);
        }*/
    </style>
</head>

<body>
    <svg style="position:fixed; top: 0px;" id="svg" xmlns="http://www.w3.org/2000/svg">
        <animateMotion id="animateMotion" xlink:href="#img" begin="0s" dur="17s" rotate="auto" repeatCount="1" fill="freeze"></animateMotion>
        <animateTransform xlink:href="#img" attributeName="transform" type="rotate" to="90 0 0" dur="1ms" begin="1ms" fill="freeze" repeatCount="1" additive="sum"></animateTransform>
        <animateTransform id="cloud1T" xlink:href="#cloud1" attributeName="transform" type="translate" to="-25,30" dur="0.8s" begin="0ms" repeatCount="indefinite"/>
        <animate id="cloud1O" xlink:href="#cloud1" attributeName="opacity" type="opacity" to="0" dur="0.8s" begin="0ms" repeatCount="indefinite"/>
        <animateTransform xlink:href="#cloud2" attributeName="transform" type="translate" to="-25,45" dur="0.8s" begin=".8s" repeatCount="indefinite"/>
        <animate xlink:href="#cloud2" attributeName="opacity" type="opacity" to="1" dur="0.8s" begin=".8s" repeatCount="indefinite"/>
        <g id="img">
            <image transform="translate(-25,-25)" xlink:href="image/car.png" width="50" height="50" />
            <image id="cloud1" transform="translate(-25,23)" xlink:href="image/timg.jpg" width="50" height="10" />
            <image id="cloud2" transform="translate(-25,30)" opacity="0" xlink:href="image/timg.jpg" width="50" height="15" />
        </g>
        <path id="path" stroke="url(#linearPath)" stroke-width="2" fill="none" ></path>
        <linearGradient id="linearPath">
            <stop offset="0%" stop-color="red"/>
            <stop offset="100%" stop-color="orange"/>
        </linearGradient>
    </svg>
    <main>
        <div class="_step _step1">
            <!-- <div class="shape shape1"></div> -->
            <div class="">
                <h2>使用polygon（）</h2>
                <p>我们可以使用polygon() 方法来计算图形范围。这个方法从坐标系中获取多个点用于绘制图形，每个点由(x, y)值定位。 例子中我们将要创建一个非常简单的多边形，如下图所示：使用polygon（）坐标点的单位可以是固定值，或者百分比。在这个例子中我们将以百分比的形式设置点阵位置。接下来我们需要应用这个样式在浮动元素上。</p>
                <!-- <img src="image/car.png" alt=""><img src="image/car.png" alt=""><img src="image/car.png" alt=""><img src="image/car.png" alt=""><img src="image/car.png" alt="">
                <img src="image/weiqi.png" alt=""> -->
                <p>Note: 用户代理 必须使用由HTML5规范定义的CORS-enabled fetch方法来处理 shape-outside 的值中的所有URL。当捕获的时候，用户代理必须使用“匿名”模式来设置层叠样式表的URL的 referrer source 和设置所在文档的URL的 origin 。如果这导致出现没有有效的备份图像这样的网络错误， 产生的影响就跟指定了值 none 一样。</p>
            </div>
        </div>
        <div class="_step _step2">
            <!-- <div class="shape shape2"></div> -->
            <div class="_step _step2">
                <h2>使用polygon（）</h2>
                <p>我们可以使用polygon() 方法来计算图形范围。这个方法从坐标系中获取多个点用于绘制图形，每个点由(x, y)值定位。 例子中我们将要创建一个非常简单的多边形，如下图所示：使用polygon（）坐标点的单位可以是固定值，或者百分比。在这个例子中我们将以百分比的形式设置点阵位置。接下来我们需要应用这个样式在浮动元素上。</p>
                <!-- <img src="image/car.png" alt=""><img src="image/car.png" alt=""><img src="image/car.png" alt=""><img src="image/car.png" alt=""><img src="image/car.png" alt="">
                <img src="image/weiqi.png" alt=""> -->
                <p>Note: 用户代理 必须使用由HTML5规范定义的CORS-enabled fetch方法来处理 shape-outside 的值中的所有URL。当捕获的时候，用户代理必须使用“匿名”模式来设置层叠样式表的URL的 referrer source 和设置所在文档的URL的 origin 。如果这导致出现没有有效的备份图像这样的网络错误， 产生的影响就跟指定了值 none 一样。</p>
            </div>
        </div>
    </main>
    <script>
        window.onload = function(){
            var svg = document.getElementById("svg");
            var animateMotion = document.getElementById("animateMotion");
            var path = document.getElementById("path");
            var g = document.getElementById("img");
            var height = document.documentElement.clientHeight||document.body.clientHeight;
            var width = document.documentElement.clientWidth||document.body.clientWidth;
            var line = "M25,25 C25,25 25,25 "+(width-25)+",25 C"+(width-25)+",25 "+(width-25)+",25 "+(width-25)+","+(height/2-25)+" C"+(width-50)+","+(height/2-25)+" "+(width-50)+","+(height/2-25)+" 25,"+(height/2-25)+" C25,"+(height-50)+" 25,"+(height-50)+" 25,"+(height-50)+" C25,"+(height-50)+" 25,"+(height-50)+" "+(width-50)+","+(height-50);
            svg.setAttribute("height",height - 25);
            svg.setAttribute("width",width - 10);
            animateMotion.setAttribute("path",line);
            path.setAttribute("d",line);
        }
    </script>
</body>

</html>